import { getUserList } from '@/apis/user';
import { useRole } from '@/hook/useRole';
import { Space, Table, Tag, Card, Tooltip } from 'antd';
import React, { useEffect, useState } from 'react';
import TableCard from '@/components/card/tablecard'
import './index.scss'
import UserModal from '@/components/modal/userModal';
function App() {
    const [loading, setLoading] = useState(true)
    const [list, setList] = useState([])
    const { list: userRole } = useRole()
    const [params, setParams] = useState({
        name: ''
    })
    const [rows,setRows]=useState(null)
    const [modalType,setModalType]=useState(1)

    // 弹框模块
    const [isModalOpen, setIsModalOpen] = useState(false)
    const getList = async () => {
        let res = await getUserList(params)
        let { code, data: _list } = res.data
        if (code == 200 && _list) {
            setList(_list.rows)
        }
        setLoading(false)
    }
    useEffect(() => {
        getList()
    }, [params])
    const columns = [
        {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '手机号',
            dataIndex: 'phone',
            key: 'phone',
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            render: ({ status }) => {
                // 0正常 1禁用
                let color = status ? 'volcano' : 'geekblue';
                return (
                    <Tag color={color} key={status}>
                        {!status ? '正常' : '禁用'}
                    </Tag>
                )
            }
        },
        {
            title: '用户角色',
            key: 'roleIdList',
            dataIndex: 'roleIdList',
            width: 180,
            render: (_, { roleIdList }) => {
                const re = Object.values(roleIdList).map((item, key) => {
                    if (!userRole.length) {
                        return '-'
                    }
                    let info = userRole.find(key => key.id == item)
                    return (
                        <Tag className='taginfo' color='green' key={key}>
                            {info.roleName}
                        </Tag>
                    )
                })
                return re

            }

        },
        {
            title: '创建时间',
            key: 'createTime',
            dataIndex: 'createTime',
            ellipsis: {
                showTitle: false,
            },
            render: createTime => (
                <Tooltip placement="topLeft" title={createTime}>
                    {createTime}
                </Tooltip>
            ),
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <a onClick={()=>eidtRows(record)}>编辑</a>
                    <a>删除</a>
                </Space>
            ),
        },
    ];
    const getParamsVal = (v) => {
        console.log(v);
        setParams({
            ...params,
            ...v
        })
    }
    // 弹框确认
    const handleOk = () => {
        console.log('handleOk');
        getList()
        setIsModalOpen(false)
    }
    // 编辑用户
    const eidtRows=({account,name,phone,storeName,roleIdList,id})=>{
        setRows({
            account,name,phone,storeName,roleIdList,id
        })
        setModalType(2)
        setIsModalOpen(true)
    }
    return (
        <>
            <TableCard btnLabel="用户" getParamsVal={getParamsVal} addClick={()=>(setIsModalOpen(true),setModalType(1))}></TableCard>
            <Card style={{ width: '100%' }}>
                <Table size='middle' scroll={{ x: 0, y: 350 }} loading={loading} columns={columns} rowKey="id" dataSource={list} />
            </Card>
            {/* 新增弹框 */}
            <UserModal modalType={modalType} rows={rows} userRole={userRole} isModalOpen={isModalOpen} handleOk={handleOk} handleCancel={() => setIsModalOpen(false)}></UserModal>
        </>
    )

}
export default App;